<!--
 * @Author: Qimu
 * @Date: 2020-04-25 06:40:21
 * @LastEditors: Qimu
 * @LastEditTime: 2020-07-16 01:48:30
 * @Description: file content
 * @FilePath: \vue-admin-koa2\vue-admin\src\components\Dialogs\EditMenu.vue
 -->
<template>
  <div class="menu">
    <!-- 编辑菜单 start-->
    <el-dialog title="编辑菜单" :visible.sync="editMenuFormCom.editMenuDialogVisible" width="20%">
      <el-form
        class="editMenuForm"
        :model="editMenuFormCom.editMenuForm"
        ref="editMenuForm"
        :rules="editMenuFormRules"
        size="mini"
        label-width="100px"
      >
        <el-form-item label="菜单名称" prop="menu_name">
          <el-input v-model="editMenuFormCom.editMenuForm.menu_name"></el-input>
        </el-form-item>
        <el-form-item
          label="菜单ID"
          prop="menu_id"
          v-if="editMenuFormCom.editMenuForm.menu_level===1"
        >
          <el-input v-model="editMenuFormCom.editMenuForm.menu_id"></el-input>
        </el-form-item>
        <el-form-item label="选择分组" v-if="editMenuFormCom.editMenuForm.menu_level===2">
          <el-select
            size="mini"
            @change="selectChanged"
            v-model="editMenuFormCom.editMenuForm.menu.menu_name"
            placeholder="选择分类"
          >
            <el-option
              v-for="item in menuList"
              :key="item._id"
              :label="item.menu_name"
              :value="item._id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editMenuFormCom.editMenuDialogVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="confirmEditMenu" size="mini">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑菜单 end-->
  </div>
</template>

<script>
import Validate from '@/plugins/validate'

export default {
  name: 'EditMenu',
  props: {
    editMenuFormCom: {
      type: Object,
      required: true
    },
    menuList: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      editMenuFormRules: Validate.editMenuFormRules,
      selectValueId: '' //下拉选项选中一级菜单_id
    }
  },
  methods: {
    //下拉选项切换事件
    selectChanged(value) {
      this.selectValueId = value
    },
    //编辑菜单对话框的提交事件
    confirmEditMenu() {
      this.$refs.editMenuForm.validate(async valid => {
        if (valid) {
          let data
          if (this.editMenuFormCom.editMenuForm.menu_level === 1) {
            data = {
              //一级菜单
              menu_id: this.editMenuFormCom.editMenuForm.menu_id,
              menu_name: this.editMenuFormCom.editMenuForm.menu_name,
              menu_level: this.editMenuFormCom.editMenuForm.menu_level,
              _id: this.editMenuFormCom.editMenuForm._id
            }
          } else {
            data = {
              //二级菜单
              selectValueId:
                this.selectValueId === ''
                  ? this.editMenuFormCom.editMenuForm.menu._id
                  : this.selectValueId,
              menu_name: this.editMenuFormCom.editMenuForm.menu_name,
              menu_level: this.editMenuFormCom.editMenuForm.menu_level,
              _id: this.editMenuFormCom.editMenuForm._id
            }
          }
          this.$emit('confirmEditMenu', data) //向父组件Author.vue传值
          this.selectValueId = ''
          this.editMenuFormCom.editMenuDialogVisible = false //关闭编辑菜单对话框
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="sass" scope>
.editMenuForm
  .el-input,.el-select
    width: 150px
</style>